<template>
  <div class="container">
    <!-- <PersonInfo2/> -->
    <el-card shadow="hover" class="person">
      <el-card shadow="hover" class="touxiang">
        <el-row>
          <el-col :span="12">
            <el-avatar :size="100" :src="circleUrl"></el-avatar>
          </el-col>
        </el-row>
      </el-card>
    </el-card>
    <el-card shadow="hover" class="person2">页面2</el-card>
    <el-card shadow="hover" class="person3"></el-card>
    <el-card shadow="hover" class="person4"></el-card>
  </div>
</template>

<script lang="ts" scoped>
import { reactive, toRefs, ref } from 'vue'
export default {
  name: 'MyComponent',
  setup() {
    const fullpageApi = ref(null)
    const data = reactive({
      options: {
        licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',
        //是否显示导航，默认为false
        navigation: true,
        //为每个section设置背景色
        sectionsColor: [
          '#41b883',
          '#ff5f45',
          '#0798ec',
          '#fec401',
          '#1bcee6',
          '#ee1a59',
          '#2c3e4f',
          '#ba5be9',
          '#b4b8ab'
        ]
      }
    })

    const state = reactive({
      circleUrl:
        'https://img1.baidu.com/it/u=2341782532,3952350362&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=750'
    })

    const { circleUrl } = toRefs(state)
    return {
      data,
      state,
      circleUrl
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
  padding-top: 50px;
  padding-left: 200px;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  background: linear-gradient(125deg, #f53e72, #ff7b34, #ffd746, #dffd59, #7cff4c, #4ef680);
  background-size: 500%;
  animation: bgAnimation 15s linear infinite;
}
@keyframes bgAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.person {
  width: 400px;
  height: 200px;
  background: #5fafff00;
  --el-card-border-radius: 20px !important;
  box-shadow: 0 15px 15px #19521d6e;
  display: flex;
  flex-direction: row;
  align-items: center;
  border: none !important;
}
.person .el-card__body {
  padding: 0;
}
.touxiang {
  width: 100px;
  height: 100px;
  margin-left: 20px;
  border-color: #2d86e000;
  background: #2d86e058;
  border: none;
  box-shadow: 0 15px 15px #19521d6e;
  --el-card-border-radius: 50% !important;
  --el-card-padding: 0 !important;
}
.touxiang .el-card__body {
  padding: 0;
  border: none;
}
.person2 {
  margin-left: 100px;
  width: 600px;
  height: 200px;
  background: #2d86e000;
  --el-card-border-radius: 20px !important;
  box-shadow: 0 15px 15px #19521d6e;
  display: flex;
  flex-direction: row;
  border: none !important;
}
.person2 .el-card__body {
  padding: 0;
}
.person3 {
  margin-top: 50px;
  width: 600px;
  height: 250px;
  background: #2d86e000;
  --el-card-border-radius: 20px !important;
  box-shadow: 0 15px 15px #19521d6e inset;
  display: flex;
  flex-direction: row;
  border: none !important;
}
.person3 .el-card__body {
  padding: 0;
}
.person4 {
  margin-left: 100px;
  margin-top: 50px;
  width: 400px;
  height: 250px;
  background: #2d86e000;
  --el-card-border-radius: 20px !important;
  box-shadow: 0 15px 15px #19521d6e inset;
  display: flex;
  flex-direction: row;
  border: none !important;
}
.person4 .el-card__body {
  padding: 0;
}
</style>
